<!-- 自定义的表格组件 -->
<template>
  <!-- 表格部分 -->
  <el-table :data="tableData" border style="width: 100%">
    <!-- 所有的列 -->
    <el-table-column
      show-overflow-tooltip
      align="center"
      v-for="(item, index) in columnData"
      :key="index"
      :prop="item.prop"
      :label="item.lable"
      :width="item.width"
    >
      <!-- 是否需要使用自定义列模板 -->
      <template #default="scope" v-if="item.showTemp">
        <slot :name="item.value" :row="scope.row"></slot>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页组件 -->
  <div class="pager-box m_t_14" v-if="showPager">
    <el-pagination
      v-model:current-page="curPage"
      v-model:page-size="curPageSize"
      background
      :page-sizes="pageSizeArr"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :small="small"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
const emit = defineEmits(["handleSizeChange", "handleCurrentChange"]);

const props = defineProps([
  "tableData",
  "columnData",
  "currentPage",
  "pageSize",
  "total",
  "pageSizeArr",
  "showPager",
]);

//当前页面
let curPage = ref(props.currentPage);

//每页的条数
let curPageSize = ref(props.pageSize);

//page-size 改变时触发
const handleSizeChange = (val) => {
  emit("handleSizeChange", val);
};

//current-page 改变时触发
const handleCurrentChange = (val) => {
  emit("handleCurrentChange", val);
};
</script>
<style lang="scss" scoped></style>
